<template>
    <!-- 用户信息编辑表单 -->
    <div class="useredit">
        <!-- 用户名输入框 -->
        <el-input v-model="user.name" clearable placeholder="请输入用户名" />
        <!-- 邮箱输入框 -->
        <el-input v-model="user.email" clearable placeholder="请输入邮箱" />
        <!-- 简介输入框（注意：此处 v-model 应为 user.intro） -->
        <el-input type="textarea" v-model="user.intro" clearable placeholder="请输入简介" :rows="5" />
        <!-- 修改按钮 -->
        <ElButton @click="editUser">修改</ElButton>
    </div>
</template>

<script setup>
// 引入 Element Plus 组件
import { ElInput, ElButton } from 'element-plus'
import { ref } from 'vue'

// 向父组件发送事件
const emit = defineEmits(['eidtUser'])
// 用户信息
let user = ref({
    name: '',
    email: '',
    intro: ''
})

// onMounted(() => {
//     // 数据请求更新
// })

// 修改用户信息
function editUser() {
    // 这里可以添加修改请求
    // 当修改成功时，通知父组件需要重新加载用户信息
    emit('eidtUser')
}
</script>

<style scoped>
.useredit {
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
}
</style>
